.ruler-wrapper{
  background: transparent;


  .ruler-line{
    .show-tip{
      background: #000000;
      color: #ffffff;
      width: 180rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 10rpx;
      border-radius: 10rpx;
      margin-left: 10rpx;
      margin-top: 10rpx;
    }
  }

  .ruler-x,.ruler-y{
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
  }
  .ruler-x{
    width: 100%;
    height: 40rpx;
    cursor: n-resize;
  }
  .ruler-y{
    width: 40rpx;
    height: 100%;
    cursor: e-resize;
  }

  .ruler-line-x{
    position: absolute;
    width: 100%;
    height: 10rpx;
    border-top: 1px solid #ff338d;
    cursor: n-resize;
  }
  .ruler-line-y{
    position: absolute;
    height: 100%;
    width: 10rpx;
    border-left: 1px solid #ff338d;
    cursor: e-resize;
  }
}
